<script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import axios from 'axios'

export default {
  name: 'MarkdownEditor',
  props: ['value'], // 传入初始 Markdown 内容
  data () {
    return {
      editor: ''
    }
  },
  mounted () {
    this.editor = new Vditor(this.$refs.vditor, {
      height: 800,
      value: this.value || '',
      theme: 'classic',
      placeholder: '请输入内容...',
      mode: 'sv', // sv: Markdown 渲染模式
      counter: {
        enable: true,
        type: 'markdown'
      },
      preview: {
        delay: 0,
        hljs: {
          style: 'github', // 使用 highlight.js 样式
          lineNumbers: true
        }
      },
      tab: '\t',
      typewriterMode: true,
      toolbarConfig: {
        pin: true
      },
      cache: {
        enable: false
      },
      // 默认开启了大纲
      outline: {
        enable: true
      },
      toolbar: [
        'emoji',
        'headings',
        'bold',
        'italic',
        'strike',
        'link',
        '|',
        'list',
        'ordered-list',
        'check',
        'outdent',
        'indent',
        '|',
        'quote',
        'line',
        'code',
        'inline-code',
        'insert-before',
        'insert-after',
        '|',
        // 'record',
        'image',
        'table',
        '|',
        'undo',
        'redo',
        '|',
        'edit-mode',
        // 'content-theme',
        'code-theme',
        'export',
        {
          name: 'more',
          toolbar: [
            'fullscreen',
            'both',
            'preview',
            'info',
            'help'
          ]
        }],
      upload: {
        // url: 'http://localhost:8000/houtai/uploadimg/', // 图片上传 API 地址
        // method: 'post',
        // fieldName: 'image', // 文件字段名
        accept: 'image/*', // 接受的文件类型
        multiple: true, // 多文件上传
        // headers: { Authorization: 'Bearer' + localStorage.getItem('access-token') },
        handler: async (files) => { // 此处使用箭头函数可以让this.editor的this指向这个函数外面
          for (const file of files) {
            console.log(file.name)
            const name = file.name
            const formData = new FormData()
            formData.append('image', file)
            try {
              console.dir(formData)
              const response = await axios.post('/houtai/uploadimg/', formData)
              // Vditor.current?.insertValue(`![${name}](${response.url})`) // 文本编辑器中插入图片
              if (response.url) {
                console.log(response.url)
                console.log('Editor instance:', this.editor)
                this.editor.insertValue(`![${name}](${response.url})`) // 文本编辑器中插入图片
              } else {
                alert('服务器未返回图片 URL')
              }
            } catch (error) {
              console.error('图片上传失败:', error)
              alert('图片上传失败，请稍后重试！')
            }
          }
        }
        // format: (files, responseText) => {
        //   const response = JSON.parse(responseText)
        //   if (response && response.url) {
        //     return response.url // 返回图片 URL
        //   }
        //   return ''
        // },
        // error: (message) => {
        //   console.error('图片上传失败：', message)
        // }
      },
      input: () => {
        this.$emit('input', this.editor.getValue())
      }
    })
  },
  watch: {
    value (newVal) {
      if (this.editor && this.editor.getValue() !== newVal) {
        this.editor.setValue(newVal || '')
      }
    }
  }
}
</script>

<template>
  <div id="vditor" ref="vditor"></div>
</template>

<style scoped>

</style>
